<!DOCTYPE html>
<html lang="en">
<head><!-- hexo injector head_begin start -->
        <link rel="preconnect" href="https://blog.fantasyke.cn/picx-images-hosting" crossorigin=""><!-- hexo injector head_begin end -->
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 7.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/uploads/avatar.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/uploads/avatar.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">
  <meta name="google-site-verification" content="0qBBGdG7vYORyT5XLZRUqQZ_y5kKYhgyUwNqjSIImg0">
  <meta name="msvalidate.01" content="63C90D0EC3DA6C31FD109132B7BEF502">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Zen+Maru+Gothic:300,300italic,400,400italic,700,700italic%7CZCOOL+XiaoWei:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha256-5eIC48iZUHmSlSUz9XtjRyK2mzQkHScZY1WdMaoz74E=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.31/fancybox/fancybox.css" integrity="sha256-gkQVf8UKZgQ0HyuxL/VnacadJ+D2Kox2TCEBuNQg5+w=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"blog.fantasyke.cn","root":"/","images":"/images","scheme":"Mist","darkmode":false,"version":"8.21.1","exturl":true,"sidebar":{"position":"right","width_expanded":350,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"copycode":{"enable":true,"style":null},"fold":{"enable":true,"height":500},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"gitalk","storage":true,"lazyload":true,"nav":{"gitalk":{"text":"gitalk","order":-1}},"activeClass":"gitalk"},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="给博客添加一个相册页面，以展示自己拍摄的一些照片 (≖ᴗ≖)✧">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo nexT主题添加相册">
<meta property="og:url" content="https://blog.fantasyke.cn/posts/52534/index.html">
<meta property="og:site_name" content="Fantasy&#39;Ke Blog">
<meta property="og:description" content="给博客添加一个相册页面，以展示自己拍摄的一些照片 (≖ᴗ≖)✧">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://fantasy-ke.github.io/picx-images-hosting/Qexo/24/11/350abd47866a11aa12d3b335c93769ac.png">
<meta property="og:image" content="https://fantasy-ke.github.io/picx-images-hosting/Qexo/24/11/51895b88d9cc6ef12738a6bac88d99c4.png">
<meta property="article:published_time" content="2024-11-29T08:17:18.076Z">
<meta property="article:modified_time" content="2024-11-29T10:00:21.582Z">
<meta property="article:author" content="Fantasy-ke">
<meta property="article:tag" content="hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://fantasy-ke.github.io/picx-images-hosting/Qexo/24/11/350abd47866a11aa12d3b335c93769ac.png">


<link rel="canonical" href="https://blog.fantasyke.cn/posts/52534/">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"https://blog.fantasyke.cn/posts/52534/","path":"posts/52534/","title":"Hexo nexT主题添加相册"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Hexo nexT主题添加相册 | Fantasy'Ke Blog</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<link rel="alternate" href="/atom.xml" title="Fantasy'Ke Blog" type="application/atom+xml">
<style>.darkmode--activated{--body-bg-color:#282828;--content-bg-color:#333;--card-bg-color:#555;--text-color:#ccc;--blockquote-color:#bbb;--link-color:#ccc;--link-hover-color:#eee;--brand-color:#ddd;--brand-hover-color:#ddd;--table-row-odd-bg-color:#282828;--table-row-hover-bg-color:#363636;--menu-item-bg-color:#555;--btn-default-bg:#222;--btn-default-color:#ccc;--btn-default-border-color:#555;--btn-default-hover-bg:#666;--btn-default-hover-color:#ccc;--btn-default-hover-border-color:#666;--highlight-background:#282b2e;--highlight-foreground:#a9b7c6;--highlight-gutter-background:#34393d;--highlight-gutter-foreground:#9ca9b6}.darkmode--activated img{opacity:.75}.darkmode--activated img:hover{opacity:.9}.darkmode--activated code{color:#69dbdc;background:0 0}button.darkmode-toggle{z-index:9999}.darkmode-ignore,img{display:flex!important}.beian img{display:inline-block!important}</style></head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Fantasy'Ke Blog</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="Search" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>About</a></li><li class="menu-item menu-item-photos"><a href="/photos/" rel="section"><i class="fas fa-camera-retro fa-fw"></i>photos</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>Search
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
      <div class="search-header">
        <span class="search-icon">
          <i class="fa fa-search"></i>
        </span>
        <div class="search-input-container">
          <input autocomplete="off" autocapitalize="off" maxlength="80"
                placeholder="Searching..." spellcheck="false"
                type="search" class="search-input">
        </div>
        <span class="popup-btn-close" role="button">
          <i class="fa fa-times-circle"></i>
        </span>
      </div>
      <div class="search-result-container">
        <div class="search-result-icon">
          <i class="fa fa-spinner fa-pulse fa-5x"></i>
        </div>
      </div>
    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#_confignextyml"><span class="nav-number">1.</span> <span class="nav-text"> _config.next.yml</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#scripts"><span class="nav-number">2.</span> <span class="nav-text"> scripts</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#inline-tagsjs"><span class="nav-number">3.</span> <span class="nav-text"> inline-tags.js</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%B8%E5%86%8C%E8%8F%9C%E5%8D%95%E5%AD%90%E9%A1%B5%E9%9D%A2"><span class="nav-number">3.1.</span> <span class="nav-text"> 相册菜单子页面</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E5%AD%90%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80"><span class="nav-number">4.</span> <span class="nav-text"> 添加子页面布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#body-endnjk"><span class="nav-number">4.1.</span> <span class="nav-text"> body-end.njk</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%B0%E5%A2%9E%E7%9B%B8%E5%86%8C%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F"><span class="nav-number">5.</span> <span class="nav-text"> 新增相册页面样式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#stylesstyl"><span class="nav-number">5.1.</span> <span class="nav-text"> styles.styl</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%BF%E6%8D%A2%E4%B8%BB%E9%A2%98%E6%96%87%E4%BB%B6"><span class="nav-number">6.</span> <span class="nav-text"> 替换主题文件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#_confignextyml-2"><span class="nav-number">6.1.</span> <span class="nav-text"> _config.next.yml</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#end"><span class="nav-number">7.</span> <span class="nav-text"> End</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E7%BB%88%E7%9A%84%E6%95%88%E6%9E%9C"><span class="nav-number">7.1.</span> <span class="nav-text"> 最终的效果</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">8.</span> <span class="nav-text"> 总结</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Fantasy-ke"
      src="/uploads/avatar.png">
  <p class="site-author-name" itemprop="name">Fantasy-ke</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">36</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2ZhbnRhc3kta2U=" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;fantasy-ke"><i class="fab fa-github fa-fw"></i>GitHub</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly94LmNvbS9BX0RyZWFtZXJfSGFyZA==" title="Twitter → https:&#x2F;&#x2F;x.com&#x2F;A_Dreamer_Hard"><i class="fab fa-twitter fa-fw"></i>Twitter</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly93d3cueW91dHViZS5jb20vQCVFNSU5MSVBOCVFNiVBMiVBNi16OWk=" title="YouTube → https:&#x2F;&#x2F;www.youtube.com&#x2F;@%E5%91%A8%E6%A2%A6-z9i"><i class="fab fa-youtube fa-fw"></i>YouTube</span>
      </span>
  </div>
<div class="cc-license animated" itemprop="sponsor">
  <a href="https://www.netlify.com" class="cc-opacity" title="Deploy with Netlify → https://www.netlify.com" target="_blank"><img width="80" src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Netlify"></a>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<div id="aplayer" style="position:relative;left;0;bottom:0;"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<script>
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: false, //自动播放
    listFolded: true, //播放列表默认折叠
    listMaxHeight: 90, //播放列表最大高度
    order: 'list', //音频循环顺序, 可选值: 'list', 'random'
    loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
    theme: '#e9e9e9', //切换音频时的主题色，优先级低于audio.theme
    preload: 'none', //音频预加载，可选值: 'none', 'metadata', 'auto'
    mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
    lrcType: 3, //歌词格式，可选值：3（LRC文件歌词格式），1（JS字符串歌词格式）
    volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
    fixed: false, //吸底模式（fixed:true），迷你模式（mini:true），普通模式（注释此行或者设置fixed:false）
    audio: [{
        name: '平凡之路',
        artist: '朴树',
        lrc: '/downloads/lrc/平凡之路-朴树.lrc',
        cover: 'http://p2.music.126.net/W_5XiCv3rGS1-J7EXpHSCQ==/18885211718782327.jpg?param=300x300',
        url: 'http://ws.stream.qqmusic.qq.com/C4000007nRJ74eQsF6.m4a?guid=942726817&vkey=64755357C5716983BEECE2981FEC3954F0DD03E7630EFF769D9C40C31F50D53E7D260CB63E22CE8F954B1144083716A1BABFC2093F8F1C14&uin=&fromtag=120032'
      },
      {
        name: '后会无期',
        artist: '徐良,汪苏泷',
        lrc: '/downloads/lrc/后会无期-G.E.M.邓紫棋.lrc',
        cover: 'http://p1.music.126.net/vpvPajo3kn88nHc7jUjeWQ==/5974746185758035.jpg?param=300x300',
        url: 'http://ws.stream.qqmusic.qq.com/C400004ECnYg0QNchK.m4a?guid=893251117&vkey=D9DCBB8C4A4CAF8550E97A2A574DE1231DFDD8BC0989CC724742C7B9831C4108E0A805A46E0F2B2A556228467C146B9C312E3E8B498614C7&uin=&fromtag=120032'
      }
    ]
  });

  // 实现切换音频时，根据音频的封面图片自适应主题色
  const colorThief = new ColorThief();
  const setTheme = (index) => {
    if (!ap.list.audios[index].theme) {
      colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
        ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
      });
    }
  };
  setTheme(ap.list.index);
  ap.on('listswitch', (data) => {
    setTheme(data.index);
  });
</script>



        </div>
      </div>
    </div>

    
    <div class="sidebar-inner sidebar-blogroll">
      <div class="links-of-blogroll animated">
        <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
          Links
        </div>
        <ul class="links-of-blogroll-list">
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9mYW50YXN5LWtlLmdpdGh1Yi5pbw==" title="https:&#x2F;&#x2F;fantasy-ke.github.io">SunBlog</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9mYW50YXN5LWtlLmdpdGh1Yi5pbw==" title="https:&#x2F;&#x2F;fantasy-ke.github.io">做梦的努力者</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL0ZhbnRhc3ktS2U=" title="https:&#x2F;&#x2F;github.com&#x2F;Fantasy-Ke">github</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vZmFudGFzeV9rZQ==" title="https:&#x2F;&#x2F;gitee.com&#x2F;fantasy_ke">gitee</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vZmFudGFzeS1rZQ==" title="https:&#x2F;&#x2F;www.cnblogs.com&#x2F;fantasy-ke">我的园子</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9hYnAuaW8v" title="https:&#x2F;&#x2F;abp.io&#x2F;">abp</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9hYnAuaW8vZG9jcy9sYXRlc3Qv" title="https:&#x2F;&#x2F;abp.io&#x2F;docs&#x2F;latest&#x2F;">abp doc</span>
            </li>
            <li class="links-of-blogroll-item">
              <span class="exturl" data-url="aHR0cHM6Ly9ibG9ncy5tYXNhc3RhY2suY29tLw==" title="https:&#x2F;&#x2F;blogs.masastack.com&#x2F;">masa blog</span>
            </li>
        </ul>
      </div>
    </div>
        <div class="pjax">
        <div class="sidebar-inner sidebar-post-related">
          <div class="animated">
              <div class="links-of-blogroll-title"><i class="fa fa-signs-post fa-fw"></i>
    Related Posts
  </div>
  <ul class="popular-posts">
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/posts/53249/" rel="bookmark">
        <time class="popular-posts-time">2023-04-11</time>
        <br>
      1.Docker介绍
      </a>
    </li>
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/posts/61442/" rel="bookmark">
        <time class="popular-posts-time">2023-04-11</time>
        <br>
      7.Docker Compose
      </a>
    </li>
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/posts/14184/" rel="bookmark">
        <time class="popular-posts-time">2023-04-11</time>
        <br>
      2.Docker基本使用
      </a>
    </li>
  </ul>

          </div>
        </div>
        </div>
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="https://blog.fantasyke.cn/posts/52534/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/uploads/avatar.png">
      <meta itemprop="name" content="Fantasy-ke">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Fantasy'Ke Blog">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Hexo nexT主题添加相册 | Fantasy'Ke Blog">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Hexo nexT主题添加相册
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>
      

      <time title="Created: 2024-11-29 16:17:18 / Modified: 18:00:21" itemprop="dateCreated datePublished" datetime="2024-11-29T16:17:18+08:00">2024-11-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="Views" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">Views: </span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="Word count in article">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">Word count in article: </span>
      <span>2k</span>
    </span>
    <span class="post-meta-item" title="Reading time">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">Reading time &asymp;</span>
      <span>7 mins.</span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>给博客添加一个相册页面，以展示自己拍摄的一些照片 (≖ᴗ≖)✧</p>
<h2 id="_confignextyml"><a class="markdownIt-Anchor" href="#_confignextyml"></a> _config.next.yml</h2>
<p>首先新建<code>hexo new page photos</code>相册页面，将会在<code>source/</code>下创建<code>photos/index.md</code>，在其中添加<code>type: photos</code></p>
<p>之后在主题<code>_config.next.yml</code>文件中对应位置<code>menu</code>里添加<code>Photos: /photos/ || image</code> ，这样生成后就能在页面的对应页面选项中有该相册Tab。</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">menu<span class="punctuation">:</span></span><br><span class="line">  photos<span class="punctuation">:</span> /photos/ || fas fa-camera-retro</span><br></pre></td></tr></table></figure>
<h2 id="scripts"><a class="markdownIt-Anchor" href="#scripts"></a> scripts</h2>
<p>在博客根目录下新建<code>scripts</code>文件夹，里面将会存放相关js文件。</p>
<p>新建<code>scripts/phototool.js</code>文件，里面内容如下，主要功能是访问照片文件夹，获取每张照片的size和name，并生成对应的json文件：</p>
<p>命令：<code>Git Bash</code>中键入 <code>node phototool.js</code>生成json<br />
注：若出现<code>Error: Cannot find module 'axios'</code>问题，请在<code>Git Bash</code>中键入对应命令<code>npm install image-size</code>进行安装。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> axios = <span class="built_in">require</span>(<span class="string">&quot;axios&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 配置项</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">OWNER</span> = <span class="string">&quot;xxxxx&quot;</span>; <span class="comment">// GitHub用户名</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">REPO</span> = <span class="string">&quot;xxxx&quot;</span>; <span class="comment">// 仓库名称</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">BRANCH</span> = <span class="string">&quot;master&quot;</span>; <span class="comment">// 分支名称</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">TOKEN</span> = <span class="string">&quot;ghp_Czclu19lnkjrACxxxxxxxxxxxxxxxxxxxxx&quot;</span>; <span class="comment">// 你的GitHub个人访问令牌</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">API_URL</span> = <span class="string">`https://api.github.com/repos/<span class="subst">$&#123;OWNER&#125;</span>/<span class="subst">$&#123;REPO&#125;</span>/contents`</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">OUTPATH</span> = <span class="string">&quot;source/images/picX&quot;</span>;<span class="comment">// 这里是输出图片json的目录</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">GenerateImg</span> = [<span class="string">&quot;DevOps&quot;</span>,<span class="string">&quot;docker&quot;</span>,<span class="string">&quot;rabbitMQ&quot;</span>,<span class="string">&quot;redis&quot;</span>]<span class="comment">//这里是你需要生成仓库中指定的文件中的图片</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 递归获取文件信息</span></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">fetchFiles</span>(<span class="params">dir = <span class="string">&quot;&quot;</span></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> url = dir ? <span class="string">`<span class="subst">$&#123;API_URL&#125;</span>/<span class="subst">$&#123;dir&#125;</span>?ref=<span class="subst">$&#123;BRANCH&#125;</span>`</span> : <span class="string">`<span class="subst">$&#123;API_URL&#125;</span>?ref=<span class="subst">$&#123;BRANCH&#125;</span>`</span>;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; data &#125; = <span class="keyword">await</span> axios.<span class="title function_">get</span>(url, &#123;</span><br><span class="line">      <span class="attr">headers</span>: &#123;</span><br><span class="line">        <span class="title class_">Authorization</span>: <span class="string">`token <span class="subst">$&#123;TOKEN&#125;</span>`</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> tasks = data.<span class="title function_">map</span>(<span class="title function_">async</span> (item) =&gt; &#123;</span><br><span class="line">      <span class="keyword">if</span> (item.<span class="property">type</span> === <span class="string">&quot;file&quot;</span> &amp;&amp; <span class="regexp">/\.(jpg|jpeg|png|webp|gif)$/i</span>.<span class="title function_">test</span>(item.<span class="property">name</span>)) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          <span class="attr">name</span>: item.<span class="property">name</span>,</span><br><span class="line">          <span class="attr">width</span>: <span class="number">0</span>,</span><br><span class="line">          <span class="attr">height</span>: <span class="number">0</span>,</span><br><span class="line">          <span class="attr">path</span>: item.<span class="property">path</span>,</span><br><span class="line">          <span class="attr">size</span>: item.<span class="property">size</span>,</span><br><span class="line">          <span class="attr">url</span>: item.<span class="property">html_url</span></span><br><span class="line">          &#125;;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (item.<span class="property">type</span> === <span class="string">&quot;dir&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="title class_">GenerateImg</span>.<span class="title function_">includes</span>(item.<span class="property">name</span>)) &#123;</span><br><span class="line">          <span class="comment">// 如果是文件夹，递归处理</span></span><br><span class="line">          <span class="keyword">const</span> folderData = <span class="keyword">await</span> <span class="title function_">fetchFiles</span>(item.<span class="property">path</span>);</span><br><span class="line">          <span class="title function_">saveJsonToFile</span>(item.<span class="property">name</span>, folderData);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (<span class="keyword">await</span> <span class="title class_">Promise</span>.<span class="title function_">all</span>(tasks)).<span class="title function_">filter</span>(<span class="title class_">Boolean</span>); <span class="comment">// 过滤掉空值</span></span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">`获取目录 <span class="subst">$&#123;dir&#125;</span> 失败: `</span>, error.<span class="property">message</span>);</span><br><span class="line">    <span class="keyword">return</span> [];</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 保存JSON到对应文件夹</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">saveJsonToFile</span>(<span class="params">folderName, data</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> folderPath = path.<span class="title function_">join</span>(<span class="variable constant_">OUTPATH</span>, folderName);</span><br><span class="line">  <span class="keyword">if</span> (!fs.<span class="title function_">existsSync</span>(folderPath)) &#123;</span><br><span class="line">    fs.<span class="title function_">mkdirSync</span>(folderPath, &#123; <span class="attr">recursive</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (data == <span class="literal">null</span>)</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  <span class="keyword">const</span> filePath = path.<span class="title function_">join</span>(folderPath, <span class="string">`<span class="subst">$&#123;folderName&#125;</span>_info.json`</span>);</span><br><span class="line">  fs.<span class="title function_">writeFileSync</span>(filePath, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(data, <span class="literal">null</span>, <span class="number">2</span>), <span class="string">&quot;utf-8&quot;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`JSON文件已保存到: <span class="subst">$&#123;filePath&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 主函数</span></span><br><span class="line">(<span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">main</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;开始获取GitHub图床数据喵...&quot;</span>);</span><br><span class="line">  <span class="keyword">await</span> <span class="title function_">fetchFiles</span>();</span><br><span class="line">  <span class="comment">//saveJsonToFile(&quot;&quot;, data); // 保存根目录的JSON</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;所有数据已处理完成喵！&quot;</span>);</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>文件样例如下：</p>
<p>生成文件的路径<code>source/images/picX/docker/docker_info.json</code></p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Untitled-1.ic5ab26hd.webp&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;width&quot;</span><span class="punctuation">:</span> <span class="number">0</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;height&quot;</span><span class="punctuation">:</span> <span class="number">0</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;path&quot;</span><span class="punctuation">:</span> <span class="string">&quot;docker/Untitled-1.ic5ab26hd.webp&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;size&quot;</span><span class="punctuation">:</span> <span class="number">14830</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://github.com/xxxxx/picx-xxxxxx/blob/master/docker/Untitled-1.ic5ab26hd.webp&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure>
<h2 id="inline-tagsjs"><a class="markdownIt-Anchor" href="#inline-tagsjs"></a> inline-tags.js</h2>
<p>新建<code>scripts/inline-tags.js</code>文件，里面内容如下，主要功能是注入方法，根据指定的路径生成相册以及图片的Html元素：</p>
<p><code>inline-tags.js</code>内容如下，主要功能是访问json文件内容，遍历每行数据，并在页面对应位置上放置代码，展示图片（其中图片链接为自个GitHub相册库中图片的链接）：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 初始化对象存储域名 cosDomain</span></span><br><span class="line"><span class="keyword">const</span> cosDomain = hexo.<span class="property">config</span>.<span class="property">cos_domain</span>;</span><br><span class="line"><span class="keyword">const</span> cos_base = hexo.<span class="property">config</span>.<span class="property">cos_base</span>;</span><br><span class="line"><span class="comment">// preconnect</span></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">injector</span>.<span class="title function_">register</span>(<span class="string">&#x27;head_begin&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"><span class="comment">//    const vendorsCdnUrl = new URL(hexo.config.theme_config.vendors.custom_cdn_url);</span></span><br><span class="line"><span class="comment">//    const vendorsCdn = vendorsCdnUrl.protocol + &#x27;//&#x27; + vendorsCdnUrl.hostname;</span></span><br><span class="line"><span class="comment">//    &lt;link rel=&quot;preconnect&quot; href=&quot;$&#123;vendorsCdn&#125;&quot; crossorigin=&quot;&quot;&gt;</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;link rel=&quot;preconnect&quot; href=&quot;<span class="subst">$&#123;cosDomain&#125;</span>&quot; crossorigin=&quot;&quot;&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 着重号</span></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;dot&#x27;</span>, <span class="keyword">function</span> (<span class="params">args</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;span class=&quot;emphasis-point&quot;&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/span&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 相册</span></span><br><span class="line"><span class="comment">// 如果输入是两个值，那么用 args[0]，args[1] 分别代表</span></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;album&#x27;</span>, <span class="keyword">function</span> (<span class="params">args</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> photoSrc = cosDomain + <span class="string">&#x27;/&#x27;</span>;</span><br><span class="line">    <span class="keyword">const</span> jsonSrc = cos_base + <span class="string">`/images/picX/<span class="subst">$&#123;args&#125;</span>`</span> + <span class="string">`/<span class="subst">$&#123;args&#125;</span>_info.json`</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;style&gt;</span></span><br><span class="line"><span class="string">            .post-block &#123; </span></span><br><span class="line"><span class="string">                padding-left: 10px;</span></span><br><span class="line"><span class="string">                padding-right: 10px;</span></span><br><span class="line"><span class="string">            &#125;</span></span><br><span class="line"><span class="string">        &lt;/style&gt;</span></span><br><span class="line"><span class="string">        &lt;div class=&quot;album&quot; photo-src=&quot;<span class="subst">$&#123;photoSrc&#125;</span>&quot; json-src=&quot;<span class="subst">$&#123;jsonSrc&#125;</span>&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 子页面列表</span></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;subpagebox&#x27;</span>, <span class="keyword">function</span> (<span class="params">[args, delimiter = <span class="string">&#x27;|&#x27;</span>, comment = <span class="string">&#x27;%&#x27;</span>], content</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(args, delimiter, comment, content);</span><br><span class="line">    <span class="keyword">const</span> links = content.<span class="title function_">split</span>(<span class="string">&#x27;\n&#x27;</span>).<span class="title function_">filter</span>(<span class="function"><span class="params">line</span> =&gt;</span> line.<span class="title function_">trim</span>() !== <span class="string">&#x27;&#x27;</span>).<span class="title function_">map</span>(<span class="function"><span class="params">line</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> item = line.<span class="title function_">split</span>(delimiter).<span class="title function_">map</span>(<span class="function"><span class="params">arg</span> =&gt;</span> arg.<span class="title function_">trim</span>());</span><br><span class="line">        <span class="keyword">const</span> imageSource = cosDomain + <span class="string">&#x27;/&#x27;</span> + item[<span class="number">1</span>] + <span class="string">&#x27;/&#x27;</span> + item[<span class="number">2</span>];</span><br><span class="line">        <span class="keyword">if</span> (item[<span class="number">0</span>][<span class="number">0</span>] === comment) <span class="keyword">return</span> <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;subpage-box-cover&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;a style=&quot;width: 100%;&quot; href=&quot;<span class="subst">$&#123;item[<span class="number">1</span>]&#125;</span>/&quot;&gt;</span></span><br><span class="line"><span class="string">                    &lt;p class=&quot;image-caption&quot;&gt;<span class="subst">$&#123;item[<span class="number">0</span>]&#125;</span>&lt;/p&gt;</span></span><br><span class="line"><span class="string">                    &lt;img alt=&quot;<span class="subst">$&#123;item[<span class="number">0</span>]&#125;</span>&quot; src=&quot;<span class="subst">$&#123;imageSource&#125;</span>&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;/a&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;</span></span><br><span class="line"><span class="string">        `</span>;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;div class=&quot;subpage-box&quot;&gt;<span class="subst">$&#123;links.join(<span class="string">&#x27;&#x27;</span>)&#125;</span>&lt;/div&gt;`</span>;</span><br><span class="line">&#125;, <span class="literal">true</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>添加配置<code>cos_domain</code>以及<code>cos_base</code>
<ul>
<li>在Hexo的<code>_config.yml</code>文件当中添加</li>
<li>
<pre class="highlight"><code class="yml"><span class="attr">cos_domain:</span> <span class="string">https://xxxxx/aaaaaa</span>
<span class="attr">cos_base:</span> <span class="string">https://xxxxx</span>
<span class="string"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 相册菜单</span><br><span class="line"></span><br><span class="line">### 相册菜单主页面</span><br><span class="line"></span><br><span class="line">添加相册主页对应不同模块标签，如下图</span><br><span class="line"></span><br><span class="line">![6a3f387807d0f0246e55a3f7e8c126fb.png](https://github.com/fantasy-ke/picx-images-hosting/Qexo/24/11/6a3f387807d0f0246e55a3f7e8c126fb.png &quot;6a3f387807d0f0246e55a3f7e8c126fb.png&quot;)</span><br><span class="line"></span><br><span class="line">文件对应的结构目录</span><br><span class="line"></span><br><span class="line">```yaml</span><br><span class="line">photos</span><br><span class="line">--Devops</span><br><span class="line">----index.md</span><br><span class="line">--docker</span><br><span class="line">----index.md</span><br><span class="line">--index.md</span><br></pre></td></tr></table></figure></span>


</code></pre>
</li>
</ul>
</li>
</ul>
<p>路径<code>photos/index.md</code>添加内容如下</p>
<figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 相册</span><br><span class="line">date: 2024-11-18 15:41:38</span><br><span class="line">type: &quot;photos&quot;</span><br><span class="line"><span class="section">comments: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;text-center&quot;</span>&gt;</span></span>岁月无声，光影留痕。<span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!-- inline-tags.js 注入的子页面方法subpagebox --&gt;</span><br><span class="line">&lt;!-- 文件夹名称 | 文件夹名称 | 对应标签的主封面 --&gt;</span><br><span class="line">&lt;!-- redis | redis | logo.491b7w38xo.webp --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% subpagebox  %&#125;</span><br><span class="line">redis | redis | logo.491b7w38xo.webp</span><br><span class="line">docker | docker | logo.1027b8euuh.webp</span><br><span class="line">rabbitMQ | rabbitMQ | image.5j48e7lwua.webp</span><br><span class="line">DevOps | DevOps | logo.7ax7942wpp.svg</span><br><span class="line">&#123;% endsubpagebox %&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="相册菜单子页面"><a class="markdownIt-Anchor" href="#相册菜单子页面"></a> 相册菜单子页面</h3>
<p>路径<code>photos/docker/index.md</code>添加内容如下</p>
<figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: docker</span><br><span class="line"><span class="section">description: <span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;../&quot;</span>&gt;</span></span>光影集<span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span> / docker</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- inline-tags.js 注入的子页面方法album --&gt;</span><br><span class="line">&#123;% album docker %&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="添加子页面布局"><a class="markdownIt-Anchor" href="#添加子页面布局"></a> 添加子页面布局</h2>
<h3 id="body-endnjk"><a class="markdownIt-Anchor" href="#body-endnjk"></a> body-end.njk</h3>
<p>新增文件<code>_data/body-end.njk</code> 如下</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">&#123;### 相册 ###&#125;</span><br><span class="line">&#123;#</span><br><span class="line">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/minigrid@3.1.1/dist/minigrid.min.js&quot; integrity=&quot;sha256-oexHY81/KuGogn0rnUzhYExxPnIyzC4ErClSXE+jFa8=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;</span><br><span class="line">#&#125;</span><br><span class="line">&lt;script src=&quot;/resources/minigrid.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&#123;&#123; pjax &#125;&#125; type=&quot;text/javascript&quot;&gt;</span><br><span class="line">var album = document.querySelector(&quot;.album&quot;);</span><br><span class="line">if (album) &#123;</span><br><span class="line">  // 相册列表 JSON 数据</span><br><span class="line">  var imgDataPath = album.getAttribute(&#x27;json-src&#x27;);</span><br><span class="line">  // 照片存储路径</span><br><span class="line">  var imgPath = album.getAttribute(&#x27;photo-src&#x27;);</span><br><span class="line">  // 最多显示数量</span><br><span class="line">  var imgMaxNum = 50;</span><br><span class="line">  // 获取窗口大小以决定图片宽度</span><br><span class="line">  var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;</span><br><span class="line">  var imageWidth;</span><br><span class="line"></span><br><span class="line">  if (windowWidth &lt; 768) &#123;</span><br><span class="line">    imageWidth = 145; // 移动端图片宽度</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">    imageWidth = 235;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  // 生成相册</span><br><span class="line">  var linkDataPath = imgDataPath;</span><br><span class="line">  var photo = &#123;</span><br><span class="line">    page: 1,</span><br><span class="line">    offset: imgMaxNum,</span><br><span class="line">    init: function () &#123;</span><br><span class="line">      var that = this;</span><br><span class="line">      $.getJSON(linkDataPath, function (data) &#123;</span><br><span class="line">          that.render(that.page, data);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">    render: function (page, data) &#123;</span><br><span class="line">      var begin = (page - 1) * this.offset;</span><br><span class="line">      var end = page * this.offset;</span><br><span class="line">      if (begin &gt;= data.length) return;</span><br><span class="line">      var imgNameWithPattern, imgName, imageSize, imageX, imageY, li = &quot;&quot;;</span><br><span class="line">      for (var i = begin; i &lt; end &amp;&amp; i &lt; data.length; i++) &#123;</span><br><span class="line">        imgNameWithPattern = data[i].path;</span><br><span class="line">        imgName = data[i].name;</span><br><span class="line">        imageSize = data[i].size;</span><br><span class="line">        li += &#x27;&lt;div class=&quot;card&quot; style=&quot;width:&#x27; + imageWidth + &#x27;px&quot; &gt;&#x27;;</span><br><span class="line">        li += &#x27;&lt;div class=&quot;album-photo&quot; style=&quot;height:&#x27; + imageWidth + &#x27;px&quot; &gt;&#x27;;</span><br><span class="line">        li += &#x27;&lt;a class=&quot;fancybox fancybox.image&quot; href=&quot;&#x27; + imgPath + imgNameWithPattern + &#x27;&quot; itemscope=&quot;&quot; itemtype=&quot;http://schema.org/ImageObject&quot; itemprop=&quot;url&quot; data-fancybox=&quot;group&quot; rel=&quot;group&quot; data-caption=&quot;&#x27; + imgName + &#x27;&quot; title=&quot;&#x27; +  imgName + &#x27;&quot;&gt;&#x27;;</span><br><span class="line">        li += &#x27;&lt;img data-src=&quot;&#x27; + imgPath + imgNameWithPattern + &#x27;&quot; src=&quot;&#x27; + imgPath + imgNameWithPattern + &#x27;&quot; alt=&quot;&#x27; +  imgName + &#x27;&quot; data-loaded=&quot;true&quot;&gt;&#x27;;</span><br><span class="line">        li += &#x27;&lt;/a&gt;&#x27;;</span><br><span class="line">        li += &#x27;&lt;/div&gt;&#x27;;</span><br><span class="line">        li += &#x27;&lt;/div&gt;&#x27;;</span><br><span class="line">      &#125;</span><br><span class="line">      album.insertAdjacentHTML(&#x27;beforeend&#x27;, li);</span><br><span class="line">      this.minigrid();</span><br><span class="line">    &#125;,</span><br><span class="line">    minigrid: function () &#123;</span><br><span class="line">      var grid = new Minigrid(&#123;</span><br><span class="line">        container: &#x27;.album&#x27;,</span><br><span class="line">        item: &#x27;.card&#x27;,</span><br><span class="line">        gutter: 12</span><br><span class="line">      &#125;);</span><br><span class="line">      grid.mount();</span><br><span class="line">      window.addEventListener(&#x27;resize&#x27;, function () &#123;</span><br><span class="line">        grid.mount();</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  photo.init();</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>引入布局js <code>minigrid.min.js</code>可以使用远程直接引入</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;https://cdn.jsdelivr.net/npm/minigrid@3.1.1/dist/minigrid.min.js&quot;</span> integrity=<span class="string">&quot;sha256-oexHY81/KuGogn0rnUzhYExxPnIyzC4ErClSXE+jFa8=&quot;</span> crossorigin=<span class="string">&quot;anonymous&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>也可以下载下来本地引入</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;/resources/minigrid.min.js&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="新增相册页面样式"><a class="markdownIt-Anchor" href="#新增相册页面样式"></a> 新增相册页面样式</h2>
<h3 id="stylesstyl"><a class="markdownIt-Anchor" href="#stylesstyl"></a> styles.styl</h3>
<p>新增文件<code>_data/styles.styl</code> 如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**********************************************************/</span></span><br><span class="line"><span class="comment">/*********************** 子页面列表 *************************/</span></span><br><span class="line"><span class="comment">/**********************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.subpage-box</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">gap</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1.5em</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">3em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.subpage-box-cover</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">30%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.subpage-box-cover</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">border-bottom</span>: none; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.subpage-box-cover</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">object-fit</span>: cover;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.9</span>;</span><br><span class="line"></span><br><span class="line">  &amp;<span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.7</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.subpage-box-cover</span> <span class="selector-class">.image-caption</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.5em</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//对齐</span><br><span class="line"><span class="selector-class">.text-center</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-left</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text-right</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: right;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**********************************************************/</span></span><br><span class="line"><span class="comment">/********************* 图片与相册 **************************/</span></span><br><span class="line"><span class="comment">/**********************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 图片阴影圆角 */</span></span><br><span class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-body</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="comment">/* border-radius: 4px; */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 图片标题 */</span></span><br><span class="line"><span class="selector-tag">figcaption</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: -<span class="number">10px</span> auto <span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.875em</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 组图标题 */</span></span><br><span class="line"><span class="selector-class">.group-picture</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.group-picture-column</span> <span class="selector-class">.image-caption</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.group-picture</span> <span class="selector-class">.group-picture-row</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 相册 */</span></span><br><span class="line"><span class="selector-class">.album</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">1080px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.album</span> <span class="selector-class">.card</span> &#123;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">transition</span>: .<span class="number">3s</span> ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 图片大小 */</span></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#200x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">200px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#250x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">250px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#300x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">300px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#350x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">350px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#400x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">400px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#450x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">450px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#500x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">500px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#550x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">550px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#600x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">600px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-attr">[src$=<span class="string">&#x27;#650x&#x27;</span>]</span> &#123; <span class="attribute">width</span>:<span class="number">650px</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-class">.fancybox-image</span> &#123; <span class="attribute">width</span>:<span class="number">100%</span>; &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="替换主题文件"><a class="markdownIt-Anchor" href="#替换主题文件"></a> 替换主题文件</h2>
<h3 id="_confignextyml-2"><a class="markdownIt-Anchor" href="#_confignextyml-2"></a> _config.next.yml</h3>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">custom_file_path:</span></span><br><span class="line">  <span class="attr">bodyEnd:</span> <span class="string">source/_data/body-end.njk</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">source/_data/styles.styl</span></span><br></pre></td></tr></table></figure>
<h2 id="end"><a class="markdownIt-Anchor" href="#end"></a> End</h2>
<p>提交博客修改：</p>
<blockquote>
<p>hexo clean<br />
hexo g<br />
hexo d</p>
</blockquote>
<p>最后可以看看效果了。</p>
<h3 id="最终的效果"><a class="markdownIt-Anchor" href="#最终的效果"></a> 最终的效果</h3>
<p><img src="https://fantasy-ke.github.io/picx-images-hosting/Qexo/24/11/350abd47866a11aa12d3b335c93769ac.png" alt="350abd47866a11aa12d3b335c93769ac.png" /></p>
<p><img src="https://fantasy-ke.github.io/picx-images-hosting/Qexo/24/11/51895b88d9cc6ef12738a6bac88d99c4.png" alt="350abd47866a11aa12d3b335c93769ac.png" /></p>
<h2 id="总结"><a class="markdownIt-Anchor" href="#总结"></a> 总结</h2>
<p>以上就是添加相册功能大概流程，因为步骤比较多，且是通过后期回忆步骤进行记录，所以可能存在些许问题，还请原谅，并请把出现的问题在本文下面的评论中点出，我会进行修改。</p>
<p>后续的实现：</p>
<ul>
<li>将照片上传至GitHub相册库时，由于照片分辨率较高，其都达到了两三M以上，上传速度较慢，导致上传进度缓慢。后期想通过代码将照片进行压缩后再上传至相册库。</li>
<li>相册展示整个操作流程为：先上传照片到git库，再生成json文件，之后便是正常的clean、g、d，后期想把压缩、上传照片和生成json文件整合到一起。</li>
<li>目前的照片展示都是所有照片一整块放一起进行瀑布流显示，后期想将照片根据其旅游场景或类别、时间不同进行分类至对应文件夹，并根据类别或时间线显式展示出不同文件夹下的照片。</li>
</ul>
<p>参考链接：<br />
<span class="exturl" data-url="aHR0cHM6Ly93d3cuY25ibG9ncy5jb20veGxqemx3L3AvNTEzNzYyMi5odG1s">hexo主题中添加相册功能<i class="fa fa-external-link-alt"></i></span></p>

    </div>

    
    
    

    <footer class="post-footer">







<div class="license">
  <div class="license-title">Hexo nexT主题添加相册</div>
  <div class="license-link">
    <a href="https://blog.fantasyke.cn/posts/52534/">https://blog.fantasyke.cn/posts/52534/</a>
  </div>
  <div class="license-meta">
    <div class="license-meta-item">
      <div class="license-meta-title">本文作者</div>
      <div class="license-meta-text">
          Fantasy-ke
      </div>
    </div>
      <div class="license-meta-item">
        <div class="license-meta-title">发布于</div>
        <div class="license-meta-text">
          2024-11-29
        </div>
      </div>
      <div class="license-meta-item">
        <div class="license-meta-title">更新于</div>
        <div class="license-meta-text">
          2024-11-29
        </div>
      </div>
    <div class="license-meta-item">
      <div class="license-meta-title">许可协议</div>
      <div class="license-meta-text">
          禁止转载引用
      </div>
    </div>
  </div>
  <div class="license-statement">
      如需转载或引用本文，请先获得作者授权！
  </div>
</div>
          <div class="reward-container">
  <div>Buy me a coffee</div>
  <button>
    Donate
  </button>
  <div class="post-reward">
      <div>
        <img src="/images/wechatpay.png" alt="Fantasy-ke WeChat Pay">
        <span>WeChat Pay</span>
      </div>

  </div>
</div>

          <div class="followme">
  <span>Welcome to my other publishing channels</span>

  <div class="social-list">

      <div class="social-item">
          <a target="_blank" class="social-link" href="https://github.com/fantasy-ke">
            <span class="icon">
              <i class="fab fa-github"></i>
            </span>

            <span class="label">GitHub</span>
          </a>
      </div>
  </div>
</div>

          <div class="post-tags">
              <a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a>
          </div>

        
  <div class="social-like a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_dd" target="_blank" rel="noopener" href="https://www.addtoany.com/share"></a>
      <a class="a2a_button_facebook"></a>
      <a class="a2a_button_twitter"></a>
      <a class="a2a_button_telegram"></a>
      <a class="a2a_button_wechat"></a>
  </div>

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/posts/6923/" rel="prev" title="C#8.0 可空引用类型">
                  <i class="fa fa-angle-left"></i> C#8.0 可空引用类型
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/posts/40291/" rel="next" title="杭州行">
                  杭州行 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments gitalk-container"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2021 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-solid fa-t-rex"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Fantasy-ke</span>
  </div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>Word count total: </span>
    <span title="Word count total">72k</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>Reading time total &asymp;</span>
    <span title="Reading time total">4:21</span>
  </span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="Total Visitors">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="Total Views">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div> 
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
<script>
  var now = new Date();
  function timer() {
    var grt= new Date("03/12/2022 13:14:21");//此处修改你的建站时间或者网站上线时间
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    var ages = `${dnum}天${hnum}小时${mnum}分${snum}秒`;
    div.innerHTML = `本站已安全运行 ${ages} 🐶`;
  }
  var div = document.createElement("div");
  //插入到copyright之后
  var copyright = document.querySelector(".busuanzi-count");
  document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
  timer();
  setInterval("timer()",1000)
</script>


<div class="footer-menu">
    <a style="color: chocolate;" href="/tags/">文章标签</a> · <a style="color: chocolate;"  href="/policy/">网站政策</a> · <a style="color: chocolate;"  href="/photos/">文章相册</a>
</div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <span class="exturl github-corner" data-url="aHR0cHM6Ly9naXRodWIuY29tL2ZhbnRhc3kta2U=" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></span>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.31/fancybox/fancybox.umd.js" integrity="sha256-a+H7FYzJv6oU2hfsfDGM2Ohw/cR9v+hPfxHCLdmCrE8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script><script src="/js/pjax.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>


  <script src="/js/third-party/addtoany.js"></script>

  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>




<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

<script>
var options = {
  bottom: '64px',
  right: 'unset',
  left: '32px',
  time: '0.5s',
  mixColor: 'transparent',
  backgroundColor: 'transparent',
  buttonColorDark: '#100f2c',
  buttonColorLight: '#fff',
  saveInCookies: true,
  label: '🌓',
  autoMatchOsTheme: true
}
const darkmode = new Darkmode(options);
window.darkmode = darkmode;
darkmode.showWidget();
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.8.0/gitalk.css" integrity="sha256-AJnUHL7dBv6PGaeyPQJcgQPDjt/Hn/PvYZde1iqfp8U=" crossorigin="anonymous">

<script class="next-config" data-name="gitalk" type="application/json">{"enable":true,"github_id":"fantasy-ke","repo":"fantasy-ke.github.io","client_id":"Ov23li8eCFrhnzfiGx5T","client_secret":"ce23581c2059392ebd00afd08d5ba43f767fd1b1","admin_user":"fantasy-ke","distraction_free_mode":true,"proxy":"https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token","language":"zh-CN","labels":"gitalk","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.8.0/gitalk.min.js","integrity":"sha256-MVK9MGD/XJaGyIghSVrONSnoXoGh3IFxLw0zfvzpxR4="},"path_md5":"b3d1174b9a2fd0c9759854621d233220"}</script>
<script src="/js/third-party/comments/gitalk.js"></script>


<script src="/js/minigrid.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script data-pjax type="text/javascript">
var album = document.querySelector(".album");
if (album) {
  // 相册列表 JSON 数据
  var imgDataPath = album.getAttribute('json-src');
  // 照片存储路径
  var imgPath = album.getAttribute('photo-src');
  // 最多显示数量
  var imgMaxNum = 50;
  // 获取窗口大小以决定图片宽度
  var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var imageWidth;

  if (windowWidth < 768) {
    imageWidth = 145; // 移动端图片宽度
  } else {
    imageWidth = 235;
  }

  // 生成相册
  var linkDataPath = imgDataPath;
  var photo = {
    page: 1,
    offset: imgMaxNum,
    init: function () {
      var that = this;
      $.getJSON(linkDataPath, function (data) {
          that.render(that.page, data);
      });
    },
    render: function (page, data) {
      var begin = (page - 1) * this.offset;
      var end = page * this.offset;
      if (begin >= data.length) return;
      var imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
      for (var i = begin; i < end && i < data.length; i++) {
        imgNameWithPattern = data[i].path;
        imgName = data[i].name;
        imageSize = data[i].size;
        li += '<div class="card" style="width:' + imageWidth + 'px" >';
        li += '<div class="album-photo" style="height:' + imageWidth + 'px" >';
        li += '<a class="fancybox fancybox.image" href="' + imgPath + imgNameWithPattern + '" itemscope="" itemtype="http://schema.org/ImageObject" itemprop="url" data-fancybox="group" rel="group" data-caption="' + imgName + '" title="' +  imgName + '">';
        li += '<img data-src="' + imgPath + imgNameWithPattern + '" src="' + imgPath + imgNameWithPattern + '" alt="' +  imgName + '" data-loaded="true">';
        li += '</a>';
        li += '</div>';
        li += '</div>';
      }
      album.insertAdjacentHTML('beforeend', li);
      this.minigrid();
    },
    minigrid: function () {
      var grid = new Minigrid({
        container: '.album',
        item: '.card',
        gutter: 12
      });
      grid.mount();
      window.addEventListener('resize', function () {
        grid.mount();
      });
    }
  };
  photo.init();
}
</script>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":170,"height":330},"mobile":{"show":true},"react":{"opacity":0.7},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
